/* SPDX-License-Identifier: Apache-2.0 */

/*
  Individual release information represented as a card with meta data

  <div class="release">
    <div class="release__meta">
      // Badge here
    </div>
    <div class="release__graphic"> // Node graphic with connecting line
      <div class="release__line"></div>
      <img class="release__node">
    </div>
    <a class="release__card" href="/link/to/version">
      <p class="release__version"></p>
      <p class="release__version-date"></p>
    </a>
  </div>

  Modifiers:
    - current: adds grey background to current release
    - latest: prevents release__line from showing above
    - oldest: precents release__line from showing below
*/

.release {
  @include clearfix;
  display: table;
  table-layout: fixed;
  width: 100%;
  border-left: 1px solid $background-color;
  padding: 0 $half-spacing-unit;

  &__meta {
    width: 110px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    & > .badge {
      float: right;
    }

    @media screen and (max-width: $tablet) {
      & > .badge {
        float: left;
        margin-right: 10px;
      }
    }

    @media screen and (max-width: $mobile) {
      display: none;
    }
  }

  &__graphic {
    width: 80px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;

    @media screen and (max-width: $tablet) {
      display: none;
    }
  }

  &__line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: index($z-index-scale, "history-line");
    background: url("../images/history-line.png") repeat-y 50% 50%;
  }

  &__node {
    background-color: $background-color;
    padding: 7px 0;
    position: relative;
    z-index: index($z-index-scale, "history-node");
  }

  &__card {
    display: block;
    @include card;
    padding: $half-spacing-unit;
    margin: $half-spacing-unit 0;
  }

  &__version {
    padding-bottom: 0;
    font-size: 1.25rem;
    font-weight: $bold-font-weight;
  }

  &__version-date {
    padding-bottom: 2px;
  }

  &__yanked-reason {
    display: block;

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &--current {
    background-color: darken($background-color, 1);
    border: 1px dotted #ccc;

    .release__node {
      background-color: darken($background-color, 1);
    }

    .release__card {
      background-color: $white;
      box-shadow: 1px 1px 2px 1px transparentize($black, 0.95);
    }
  }

  &--latest,
  &--oldest {
    .release__line {
      height: 50%;
    }
  }

  &--oldest {
    .release__line {
      bottom: auto;
      top: 0;
    }
  }
}
